import React, { useEffect, useState } from "react";
import { UploadProps } from "antd/lib/upload";
import { UploadOutlined } from "@ant-design/icons";
import { Button, Form, Input, Select, Spin, Upload, message } from "antd";
import defaultImg from "@/assets/images/default.png";
import { useGetUserResult } from "../../api/useGetUser";
// import styles from "./index.module.less";
import { useStyle } from "./useStyle";

const BaseView = () => {
  const styles = useStyle();

  const [avatar, setAvatar] = useState<string>("");
  const [form] = Form.useForm();

  const { data: user, isLoading } = useGetUserResult();

  const update = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // const data: any = { ...getFieldsValue(), avatar };
    // if (data && data.mainTenant) {
    //   // service.setMainTenant(data.mainTenant).subscribe();
    // }
  };

  const uploadProps: UploadProps = {
    // accept: ,
    action: "/jetlinks/file/static",
    showUploadList: false,
    onChange(info) {
      // if (info.file.status === "uploading") {
      //   setLoading(true);
      // }
      // if (info.file.status === "done") {
      //   setAvatar(info.file.response.result);
      //   message.success("上传成功");
      //   setLoading(false);
      // }
    },
  };

  return isLoading ? (
    <Spin />
  ) : (
    <div css={styles.baseView}>
      <div className="left">
        <Form
          layout="vertical"
          onFinish={update}
          form={form}
          initialValues={user}
        >
          <Form.Item
            label="姓名"
            name="name"
            rules={[
              {
                required: true,
                message: "姓名不能为空!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="邮箱"
            name="email"
            rules={[
              {
                type: "email",
                message: "邮箱地址不合法!",
              },
              {
                required: true,
                message: "邮箱地址不能为空!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item label="电话" name="telephone">
            <Input />
          </Form.Item>
          <Form.Item label="说明" name="description">
            <Input.TextArea rows={3} />
          </Form.Item>

          <Form.Item>
            <Button htmlType="submit" type="primary">
              更新信息
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div className="right">
        <div className="avatar_title">头像</div>
        <div className="avatar">
          <img src={avatar || defaultImg} alt="avatar" />
        </div>
        <Upload {...uploadProps} showUploadList={false}>
          <div className="button_view">
            <Button>
              <UploadOutlined />
              更换头像
            </Button>
          </div>
        </Upload>
      </div>
    </div>
  );
};

export default BaseView;
